<template>
	<div class="alarmUser">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe738;</i>
				告警管理/
				<span>告警用户配置</span>
			</div>
		</div>
		<div class="right_main">
			<div class="divider2"></div>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-form-inline" :inline="true">
				<div class="import">
					<el-form-item label="用户名：" prop="addUser" :label-width="formLabelWidth">
						<el-input v-model="ruleForm.addUser"></el-input>
					</el-form-item>
					<el-form-item label="微信：" prop="addMicro" :label-width="formLabelWidth">
						<el-input v-model="ruleForm.addMicro"></el-input>
					</el-form-item>
					<el-form-item label="手机号-短信通知：" prop="addPhone" :label-width="formLabelWidth" >
						<el-input v-model="ruleForm.addPhone"></el-input>
					</el-form-item>
					<el-form-item label="语音号-语音通知：" prop="addVoice" :label-width="formLabelWidth">
						<el-input v-model="ruleForm.addVoice"></el-input>
					</el-form-item>
					<el-form-item label="邮箱：" prop="addMailbox" :label-width="formLabelWidth">
						<el-input v-model="ruleForm.addMailbox"></el-input>
					</el-form-item>
				</div>
				<el-form-item class="conmit">
					<el-button type="primary" @click="findForm('ruleForm')" icon="search">立即查询</el-button>
					<el-button type="primary" @click="addForm('ruleForm')" icon="plus">立即添加</el-button>
					<el-button @click="resetForm('ruleForm')">重置</el-button><br>
					<span class="warning">（输入搜索条件，留空搜索全部！）</span>
				</el-form-item>
			</el-form>
			<div class="table">
				<div class="divider2"></div>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column v-for="(val,key) in tableHeader" :prop="val.prop" :label="val.label" :key="key" align="center">
					</el-table-column>
					<el-table-column label="操作" align="center">
						<template scope="scope">
							<el-button type="primary" size="small"  @click="edit(scope.$index, scope.row)">修改</el-button>
							<el-button @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="block">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataTotal"></el-pagination>
			</div>
		</div>
		<div class="revampForm" v-show="revampShow">
			<div class="revampChoose">
				<div class="vicp-close"  @click="revampShow=false"> 
					<i class="el-icon-close vicp-icon4"></i>
				</div>
				<el-form :model="revampForm" :rules="revamp" ref="revampForm" label-width="115px" class="demo-ruleForm">
					<h5>修改告警用户配置</h5>
					<el-form-item label="用户名：" prop="addUser">
						<el-input v-model="revampForm.addUser"></el-input>
					</el-form-item>
					<el-form-item label="微信：" prop="addMicro">
						<el-input v-model="revampForm.addMicro"></el-input>
					</el-form-item>
					<el-form-item label="手机号：" prop="addPhone">
						<el-input v-model="revampForm.addPhone"></el-input>
					</el-form-item>
					<el-form-item label="语音号：" prop="addVoice">
						<el-input v-model="revampForm.addVoice"></el-input>
					</el-form-item>
					<el-form-item label="邮箱：" prop="addMailbox">
						<el-input v-model="revampForm.addMailbox"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="revampComit('revampForm')">立即修改</el-button>
						<el-button @click="resetForm('revampForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</div> 
		</div>	
	</div>
</template>
<script src="./alarmUser.js"></script>
<style lang="stylus" rel="stylesheet/stylus" src="./alarmUser.styl"></style>